var TUTOR_STEP=0;
var TUTOR_SAT_IN=0;
function startTutor() {
    if (TUTOR_STEP>1) {
    //new Effect.Appear('tutorframe', {to: 0.9});
    $('#tutorframe').fadeIn(600);
    
    return;
    }

    var ttext =  document.getElementById('tutortext');
    var tb2 =    document.getElementById('tutorb2');
    var tb3 =    document.getElementById('tutorb3');
    var tb1 =    document.getElementById('tutorb1');
    TUTOR_STEP=1;
    tb1.style.opacity='0.0';
    tb2.style.opacity='1.0';
    document.getElementById('tutorframe').className = '';
    //document.getElementById('tutorframe').style.opacity = '0.0';
    $('#tutorframe').Draggable({zIndex: 200});
    $('#tutorframe').fadeIn(600);
    ttext.innerHTML = 'Welcome to <b>c0nflict</b>, a new strategy game based on concepts borrowed from Risk and DiceWars.  While many of the strategic elements of this game are the same, there are lots of new nuances I\'d like to tell you about.';
    tb3.innerHTML = 'No thanks, done the tutorial.';
    tb3.onclick = endTutor;
    tb2.innerHTML = 'OK, Go ahead!';
    tb2.onclick = tutorTables;
    setTimeout("tutorTables()",10000);
    
}

function prodToReg() {
    if (TUTOR_STEP>1) {
    return;
    }

    var ttext =    document.getElementById('tutortext');
    var tb2 =    document.getElementById('tutorb2');
    var tb3 =    document.getElementById('tutorb3');
    var tb1 =    document.getElementById('tutorb1');
    TUTOR_STEP=1;
    tb1.style.opacity='0.0';
    tb2.style.opacity='1.0';
    document.getElementById('tutorframe').className = '';
    //document.getElementById('tutorframe').style.opacity = '0.0';
    $('#tutorframe').Draggable();
    $('#tutorframe').fadeIn(600);
    ttext.innerHTML = 'Welcome to <b>c0nflict</b>, a new strategy game based on concepts borrowed from Risk and DiceWars.  <b>Please login or register at the bottom of the screen</b>, or watch a game in progress.';
    tb3.innerHTML = 'No thanks, done the tutorial.';
    tb3.onclick = endTutor;
    tb2.innerHTML = 'Tell me more!';
    tb2.onclick = tutorTables;
    setTimeout("$('#tutorframe').fadeOut('fast');",30000);
	//$('#tutorframe').fadeOut(300);    
}

function flashAlot(divid) {
 if (divid.indexOf('table')!=-1) flashAlot('tbanner');
 try {
  oldcolor=$('#'+divid).css('background-color');
  xmax=10;
  for (x=0;x<xmax;x++) {
  //setTimeout("$('#"+divid+"').Highlight('fast','#900');",x*1000);
  setTimeout("try { document.getElementById('"+divid+"').style.backgroundColor = '#e00' } catch (err) {} ",x*1000);
  setTimeout("try { document.getElementById('"+divid+"').style.backgroundColor = '"+oldcolor+"' } catch (err) {} ",x*1000+100);
  }
  setTimeout("try { document.getElementById('"+divid+"').style.backgroundColor = '"+oldcolor+"' } catch (err) {} ",xmax*1000+200);
 } catch (err) {}
}
function tutorTables() {
  if (TUTOR_STEP!=1) return;
  TUTOR_STEP=2;
  var ttext =    document.getElementById('tutortext');
  var tb2 =    document.getElementById('tutorb2');
  var tb3 =    document.getElementById('tutorb3');
  var tb1 =    document.getElementById('tutorb1');
  ttext.innerHTML = " First let me acquaint you with the interface, there are two sets of buttons, and a table list on the bottom right of the screen   You can select a table name and the game will bring you there, grey\'d out tables are in progress, but you can still watch. <br><br> Some tables have minimum ratings to play there, these are denoted by the rank symbol of the lowest rank who can sit.  <br>Try changing tables now!";
  flashAlot('friendslist');
  flashAlot('tbanner');
    tb2.innerHTML = 'I get changing tables';
    tb2.onclick = tutorTableChanged;
}

function tutorTableChanged() {
  if (TUTOR_STEP!=2) return;
  TUTOR_STEP=3;
  $('#tutorframe').fadeIn(600);
  var ttext =    document.getElementById('tutortext');
  var tb2 =    document.getElementById('tutorb2');
  var tb3 =    document.getElementById('tutorb3');
  var tb1 =    document.getElementById('tutorb1');
  ttext.innerHTML = "Great! Now that you're at an inactive table (you should have clicked a non greyed one) you press the <button>Sit</button> button to sit down at the table and get ready to play, try it now. <br><br>If you get an error message about rating when you try to sit, try to go to a table with a lower rank.<br><br>The <button>Warp</button> at the bottom of the screen will warp you instantly to an open table you can play.";
  flashAlot('chair');
  tb2.innerHTML = 'I get sitting';
  tb2.onclick = tutorSatIn;
 }

function tutorSatIn() {
  TUTOR_SAT_IN=1;
  if (TUTOR_STEP!=3) return;
  TUTOR_STEP=4;
  $('#tutorframe').fadeIn('fast');
  var ttext =    document.getElementById('tutortext');
  var tb2 =    document.getElementById('tutorb2');
  var tb3 =    document.getElementById('tutorb3');
  var tb1 =    document.getElementById('tutorb1');
  ttext.innerHTML = " You can press <button>Sit</button> again now if you want to get up, but only before the game starts.  Also the Mute button will turn off our cool special effects. <br><br> To speed things along, you can check the *Play now* checkbox at the top of the screen, this will let the game start when 3 or more people have checked it. Just leave this window open, and you will hear that sound (just played) when the game begins.";
  playSound('startgame');
  flashAlot('chair');
  flashAlot('Snd');
  tb2.style.opacity="0.0";
  setTimeout("$('#tutorframe').fadeOut('fast');",25000);
}

function tutorGameStart() {
  if (TUTOR_STEP!=4) return;
  TUTOR_STEP=5;
  var ttext =    document.getElementById('tutortext');
  var tb2 =    document.getElementById('tutorb2');
  var tb3 =    document.getElementById('tutorb3');
  var tb1 =    document.getElementById('tutorb1');
  $('#tutorframe').fadeIn('fast');
  ttext.innerHTML = "  Cool! The game has started.  Everyone takes a turn moving -- in order to do so, click on a square of your color (your name is assigned a color) and then any of the 8 adjacent squares to attack that square.  You cannot attack your own color, or a black square.  The game will ding when it's your turn.  <br><br>Since reinforcements are given based on the largest contiguous set of squares you own, a good strategy now is to connect your squares together in one group.";
  tb2.style.opacity="0.0";
}

function tutorYourTurn(myColor) {
  if (TUTOR_STEP!=5) return;
  TUTOR_STEP=6;
  var ttext =    document.getElementById('tutortext');
  var tb2 =    document.getElementById('tutorb2');
  var tb3 =    document.getElementById('tutorb3');
  var tb1 =    document.getElementById('tutorb1');
  tb2.style.opacity="0.0";
  $('#tutorframe').fadeIn('fast');
  ttext.innerHTML = "  Cool! The game has started.  Everyone takes a turn moving -- in order to do so, click on a square of your color (your name is assigned a color) and then any of the 8 adjacent squares to attack that square.  You cannot attack your own color, or a black square. <br><br> It\'s your turn now, select a <span style=\"color: "+myColor+"\"> colored square. </span>";
}

function tutorSquareDepressed() {
  if (TUTOR_STEP!=6) return;
  TUTOR_STEP=7;
  var ttext =    document.getElementById('tutortext');
  $('#tutorframe').fadeIn('fast');
  ttext.innerHTML = "Great!  You selected one of your squares.  Now to attack, select an adjacent square of another color.";  
}
function tutorAttackMade(winloss) {
  if (TUTOR_STEP!=7) return;
  TUTOR_STEP=8;
  var ttext =    document.getElementById('tutortext');
  $('#tutorframe').fadeIn('fast');
  ttext.innerHTML += "<br>We\'re almost done now, and you just attacked!  ";
  if (winloss==1)
  ttext.innerHTML += "AND WON!  Smooth sailing!";
  else ttext.innerHTML += "Sorry, it looks like you lost.. try again!";
  ttext.innerHTML += "  Now you can either attack again, or press <button>EndTurn</button> to move to the next player.";
    
}

function tutorGotRestack(num) {
  if (TUTOR_STEP!=8) return;
  TUTOR_STEP=0;
  //$('#tutorframe').fadeIn('fast');
  $('#tutorframe').fadeIn('fast');
  
  var ttext =    document.getElementById('tutortext');
  ttext.innerHTML = "You just got your very first restack, congratulations!  The restack is equal to your largest area of connected space -- where connected in this case specifically means only vertically or horizontally (meaning north /south / east / west but not diagonals).  ";
  ttext.innerHTML+="You just got "+num+" extra armies -- can you see how we arrived at that?";
  ttext.innerHTML+="<br><br>  OK!  The game ends when only one player is left.  Players are removed from the game either by total defeat, or by pressing the Flag button.  Flagging makes you leave the game in the last possible place still left -- regardless of your current size.";
  ttext.innerHTML+="<BR><BR> GOOD LUCK!";
  setTimeout("$('#tutorframe').fadeOut('fast');",60000);
}
function endTutor() {
    TUTOR_STEP=0;
	$('#tutorframe').fadeOut('fast');  
    //document.getElementById('tutorframe').style.opacity = '0.0';
    document.getElementById('tutorframe').className = 'hidden';
}
